<template>
	<div style="height: 100%;">
		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;background: #fff;margin-bottom: 10px;"
			class="displayFlexBet">
			<div>
				<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" type="date" size="small" class="w130px">
				</el-date-picker>
				<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" type="date" size="small" class="ml10 w130px">
				</el-date-picker>

				<el-select v-model="status" clearable placeholder="选择状态" size="small"
					style="margin-left: 10px;width: 100px;">
					<el-option label="待办" value="WAIT_COMPLETE" />
					<el-option label="已办" value="HAVE_COMPLETE" />
					<el-option label="逾期" value="OVER_TIME" />
					<el-option label="未完善" value="NOT_CONSUMMATE" />
				</el-select>

				<el-select v-model="scheduleCategory" placeholder="选择种类" size="small" @change="reset()" clearable
					style="margin-left: 10px;width: 100px;">
					<el-option label="预警" value="WARNING" />
					<el-option label="日常" value="NORMAL" />
					<el-option label="问题" value="PROBLEM" />
				</el-select>

				<el-button icon="el-icon-search" type="primary" @click="search()" size="small"
					class="ml10">查询</el-button>
			</div>

			<el-button icon="el-icon-plus" @click="visible = true,form = {}" type="primary" size="small">新增</el-button>
		</div>

		<!-- <el-radio-group size="mini" style="margin-bottom: 10px;" v-model="scheduleType" @input="changeRadio">
			<el-radio-button v-for="(item,index) in heaaderRadios" :key="index" :label="item.name"></el-radio-button>
		</el-radio-group> -->
		<div class="displayFlex" style="padding: 20px 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;">
			<div v-for="(item,index) in heaaderRadios" :key="index" style="margin-right: 10px;"
				@click="changeRadio(item.name)" :class="[scheduleType == item.name?'selectedClass':'']" class="point">
				{{item.name}}（{{item.num}}）
			</div>
		</div>
		<div class="displayFlex"
			style="background: #fff;padding: 10px 20px;border-radius: 16px;margin-bottom: 10px;font-size: 14px;color: #999;">
			<div style="flex: 1;">类型</div>
			<div style="flex: 2;">类别</div>
			<div style="flex: 2;">内容</div>
			<div style="flex: 3;">说明</div>
			<div style="flex: 1;"></div>
			<div style="flex: 1;">来源</div>

			<div style="flex: 1;">执行</div>
			<div style="flex: 1;">状态</div>
			<div style="flex: 1;">完成时间</div>
			<div style="flex: 1;text-align: center;">操作</div>
		</div>
		<div style="height: calc(100% - 220px);overflow-y: scroll;overflow-x: hidden;">
			<div v-for="(item,index) in tableData" :key="index" class="point" @click="getData(item)"
				style="background: #fff;padding: 10px 20px;border-radius: 16px;margin-bottom: 10px;font-size: 14px;">
				<div class="displayFlex">
					<div style="flex: 1;">{{item.scheduleCategoryStr}}</div>
					<div style="flex: 2;">{{item.scheduleTypeStr}}</div>
					<div style="flex: 2;">{{item.content}}</div>
					<div style="flex: 3;">{{item.remark}}</div>
					<div style="flex: 1;"></div>
					<div style="flex: 1;">{{item.publishByName}}</div>

					<div style="flex: 1;">{{item.executeByName}}</div>
					<div style="flex: 1;">
						<el-tag v-if="item.status == 'WAIT_COMPLETE' || item.status == 'NOT_CONSUMMATE'"
							type="warning">{{item.statusStr}}</el-tag>
						<el-tag v-else-if="item.status == 'HAVE_COMPLETE'" type="success">{{item.statusStr}}</el-tag>
						<el-tag v-else-if="item.status == 'OVER_TIME'" type="danger">{{item.statusStr}}</el-tag>
						<el-tag v-else type="primary">{{item.statusStr}}</el-tag>
					</div>

					<div style="flex: 1;">{{item.planCompleteTimeStr}}</div>
					<div style="flex: 1;display: flex;align-items: center;justify-content: center;">
						<div type="text" style="color: #426ab3;cursor: pointer;font-size: 20px;"
							@click.stop="edit(item)">
							<i class="el-icon-edit-outline"></i>
						</div>
						<div v-if="item.status !='CANCEL'" type="text"
							style="color: #F56C6C;cursor: pointer;font-size: 20px;margin-left: 5px;"
							@click.stop="cancelSchedule(item)">
							<i class="el-icon-s-release"></i>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div v-show="tableData&&tableData.length>0" align="right" style="margin-top: 10px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="pageIndex" :page-sizes="[10,20,30,50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog :visible.sync="visible" width="30%" top="4%" title="任务信息">
			<div style="margin: 0 auto;">
				<el-form ref="form" :model="form" :rules="formRules" label-width="80px">
					<el-form-item label="类别" prop="scheduleType">
						<el-select v-model="form.scheduleType" placeholder="请选择危险废物类别"
							@change="getDocumentScheduleContentCodeList" style="width: 100%;">
							<el-option v-for="item in dataList1" :label="item.name" :value="item.code">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="内容" prop="contentCode">
						<el-select v-model="form.contentCode" placeholder="请选择内容" style="width: 100%;">
							<el-option v-for="item in dataList2" :label="item.name" :value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="说明" prop="remark">
						<el-input v-model="form.remark" type="textarea" style="width: 100%;"></el-input>
					</el-form-item>

					<el-form-item label="执行人" prop="planExecuteBy">
						<el-select v-model="form.planExecuteBy" placeholder="请选择执行人" style="width: 100%;">
							<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="截止" prop="planCompleteTime">
						<el-date-picker class="short-input" v-model="form.planCompleteTime" type="date"
							format="yyyy-MM-dd" placeholder="截止日期" style="width: 100%;">
						</el-date-picker>
					</el-form-item>


					<div style="text-align: center;margin-top: 30px">
						<el-button type="primary" @click="saveOrUpdate">保存</el-button>
						<el-button @click="visible = false">取消</el-button>
					</div>
				</el-form>
			</div>

		</el-dialog>

		<entScheduleDet ref="entScheduleDet"></entScheduleDet>
	</div>
</template>

<script>
	import entScheduleDet from "@/components/entSchedule/entScheduleDet"
	import $ from 'jquery'

	let that
	let APPKEY = '5da5441f62e48aedc7a3853ffc75c2db';
	let PRODID = 'gf';
	let UPLOAD_ACTION = '/upload';
	let div_ACTION = '/div';
	let REMOVE_ACTION = '/remove';
	let IMGURL = 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload';
	export default {
		name: '',
		components: {
			entScheduleDet
		},
		data() {
			return {
				params: {},
				heaaderRadios: [],
				tableData: [],
				total: 0,
				pageIndex: 1,
				pageSize: 20,

				visible: false,

				form: {
					contentCode: '',
				},
				dateMonth: '',
				formRules: {
					scheduleType: [{
						required: true,
						message: '请选择危险废物类别',
						trigger: 'blur'
					}],
					contentCode: [{
						required: true,
						message: '请选择内容',
						trigger: 'blur'
					}],
					planCompleteTime: [{
						required: true,
						message: '请填写截止时间',
						trigger: 'blur'
					}],
					planExecuteBy: [{
						required: true,
						message: '请填写执行人',
						trigger: 'blur'
					}],
				},
				dataList1: [],
				dataList2: [],
				dataList3: [],
				scheduleType: '',
				status: '',
				scheduleCategory: '',
				upload: {
					file: '',
					fileList: [],
					visible: false,
				},

			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token


			that.ajax({
				url: '/documentEntSchedule/getDocumentScheduleTypeList?ticketId=' + that.params.ticketId,
				contentType: 'application/x-www-form-urlencoded',
				data: {
					ticketId: that.params.ticketId,
				},
				success: function(result) {
					that.dataList1 = result.data
				}
			})

			that.ajax({
				url: '/documentEntSchedule/getPlanExecutorList?ticketId=' + that.params.ticketId,
				contentType: 'application/x-www-form-urlencoded',
				data: {
					ticketId: that.params.ticketId,
				},
				success: function(result) {
					that.dataList3 = result.data
				}
			})

			that.pageEntGroupDataReportList()
		},
		methods: {
			//取消任务
			cancelSchedule(item) {
				this.$confirm('是否取消此任务?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: 'documentEntSchedule/cancelSchedule',
						data: {
							scheduleId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: async (result) => {
							that.pageIndex = 1
							that.pageEntGroupDataReportList()
						}
					}, "加载中...");
				})
			},

			async getData(item) {
				that.params.referId = item.id
				that.params.type = item.contentCode
				that.$refs.entScheduleDet.getData(item)
			},


			getDocumentScheduleContentCodeList() {
				//that.form.contentCode = ''
				that.ajax({
					url: '/documentEntSchedule/getDocumentScheduleContentCodeList',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						ticketId: that.params.ticketId,
						code: that.form.scheduleType
					},
					success: function(result) {
						that.dataList2 = result.data
					}
				})
			},

			edit(row) {
				that.visible = true
				that.form = row
				that.getDocumentScheduleContentCodeList()
				//that.dateMonth = row.startTime.split("-")[0] + "-" + row.startTime.split("-")[1]
			},

			search() {
				that.params.status = that.status
				that.params.scheduleCategory = that.scheduleCategory
				that.pageIndex = 1
				that.pageEntGroupDataReportList()
			},

			handleSizeChange: function(val) {
				this.pageIndex = 1;
				this.pageSize = val;
				this.pageEntGroupDataReportList();
			},

			handleCurrentChange: function(val) {
				this.pageIndex = val;
				this.pageEntGroupDataReportList();
			},

			deleteTargetProgress(id) {
				var _this = this;
				that.ajax({
					url: '/groupCompany/dataReport/deleteEntGroupDataReport?tickId=' + that.params
						.ticketId,
					data: {
						id: id
					},
					success: function(result) {
						if (result.status == 1 && result.data) {
							that.$message({
								message: '删除成功',
								type: 'error'
							});
							that.pageEntGroupDataReportList()
						}
					}
				});
			},

			saveOrUpdate: function() {
				var _this = this;
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						that.uploadFile(function(fileId) {
							that.ajax({
								url: '/documentEntSchedule/saveOrUpdateDocumentEntSchedule?ticketId=' +
									that.params.ticketId,
								contentType: 'application/json',
								data: JSON.stringify(_this.form),
								success: function(result) {
									if (result.status == 1 && result.data) {
										_this.visible = false;
										if (_this.form.id) {
											that.$message({
												message: '修改成功',
												type: 'success'
											});
										} else {
											that.$message({
												message: '保存成功',
												type: 'success'
											});
											that.form = {}
										}
										_this.pageEntGroupDataReportList();
									} else {
										if (result.infoList && result.infoList.length >
											0) {
											that.$message({
												message: result.infoList[0],
												type: 'error'
											});
										} else {
											that.$message({
												message: '保存信息失败',
												type: 'error'
											});
										}
									}
								}
							});
						})
					}
				});
			},

			changeRadio(value) {
				that.scheduleType = value
				let scheduleTypeIndex = that.heaaderRadios.findIndex(item => item.name == that.scheduleType)
				that.params.scheduleType = that.heaaderRadios[scheduleTypeIndex].code
				that.pageIndex = 1
				that.pageEntGroupDataReportList()
			},

			pageEntGroupDataReportList() {
				that.ajax({
						url: '/documentEntSchedule/countDocumentEntSchedule?ticketId=' + that.params.ticketId,
						contentType: 'application/json',
						data: JSON.stringify(that.params),
						success: function(result) {
							that.heaaderRadios = result.data
							that.scheduleType = that.scheduleType || that.heaaderRadios[0].name
						},
					}),

					that.ajax({
						url: '/documentEntSchedule/pageDocumentEntSchedule?ticketId=' + that.params
							.ticketId + '&pageIndex=' + that.pageIndex + '&pageSize=' + that.pageSize,
						contentType: 'application/json',
						data: JSON.stringify(that.params),
						success: function(result) {
							if (result.status == 1 && result.data.records && result.data.records.length > 0) {
								that.total = result.data.total;
								that.tableData = result.data.records;
							} else {
								that.tableData = [];
								that.total = 0;
							}
						}
					})
			},

			changeFile: function(file, fileList) {
				var _this = this;
				file.url = URL.createObjectURL(file.raw);
				_this.upload.fileList = fileList
				_this.upload.file = file;
			},

			removeFile() {
				this.upload.fileList = []
				this.upload.file = ''
			},

			uploadFile: function(callback) {
				var _this = this;

				if (that.upload.file == '') {
					callback("")
				} else {
					var formdata = new FormData()
					formdata.append("file", _this.upload.file.raw);
					formdata.append("appKey", APPKEY);
					formdata.append("businessCode", that.randomChar(19));
					formdata.append("prodID", PRODID);
					$.ajax({
						url: IMGURL + '/upload',
						data: formdata,
						type: 'POST',
						dataType: 'json',
						contentType: false,
						processData: false,
						success: function(result) {
							var fileId = result.message.fileID;
							callback(fileId);
						},
						error: function() {}
					})
				}
			},

			randomChar: function(l) {
				var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
				var tmp = "";
				var timestamp = new Date().getTime();
				for (var i = 0; i < l; i++) {
					tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
				}
				return timestamp + tmp;
			},
		}
	}
</script>

<style>
	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.selectedClass {
		color: #3b45f4;
		font-weight: bold;
	}

	.u-m-20 {
		margin: 10px;
	}

	.u-p-20 {
		padding: 10px;
	}

	.u-m-b-10 {
		margin-bottom: 10px;
	}

	.u-type-info {
		color: #999;
	}

	.u-m-l-20 {
		margin-left: 10px;
	}
</style>